{% extends './base.html' %}
{% block head %}
<title>评论“{{ lesson.name }}”</title>
{% endblock %}
{% block content %}
<div class="container-sm">
    <div class="m-3">
        <h1>评论“{{ lesson.name }}”</h1>
        <div class="alert alert-primary" role="alert">
            <h4 class="alert-heading">评论指南</h4>
            <p>你的评论是其他同学选课时的重要参考(*￣3￣)╭<br>你可以考虑从以下方面撰写：</p>
            <ul>
                <li>选课</li>
                <li>授课</li>
                <li>成绩</li>
                <li>考核方式</li>
                <li>课程难度</li>
                <li>复习方式</li>
                <li>作业与资料</li>
                <li>总结</li>
            </ul>
            <p>对于教师的名字，请务必使用拼音缩写( •̀ ω •́ )✧</p>
        </div>
        <form class="comment-form">
            {% csrf_token %}
            <div class="form-floating mb-3">
                <input type="number" step="0.1" min="0" max=100 name="score" class="form-control" id="floatingInput"
                    placeholder="你这门课的绩点">
                <label for="floatingInput">你这门课的绩点</label>
                <div id="passwordHelpBlock" class="form-text">
                    范围：[0,5]。非必需 :)
                </div>
            </div>
            <div class="form-floating mb-3">
                <input type="text" name="title" class="form-control" id="floatingInput" placeholder="在这里写下标题" required>
                <label for="floatingInput">标题*</label>
            </div>
            <div class="form-floating mb-3">
                <textarea type="text" name="thoughts" class="form-control" aria-label="With textarea" id="floatingInput"
                    placeholder="你的评论写在这里" required style="height: 304px;"></textarea>
                <label for="floatingInput">你对这门课的看法*</label>
                <div class="form-text">
                    最长2000字节。支持<mark>Markdown</mark>，建议从四级标题开始写，否则字体过大。<a
                        href="https://www.runoob.com/markdown/md-tutorial.html">学习Markdown</a>
                </div>
            </div>
            <div class="form-floating mb-3">
                <input type="text" maxlength="6" name="term" class="form-control" id="floatingInput" placeholder="你的昵称"
                    required>
                <label for="floatingInput">你上这门课的学期*</label>
                <div id="passwordHelpBlock" class="form-text">
                    格式：2020-1。最长6字节。
                </div>
            </div>
            <input class="username-input" type="hidden" name="username">
            <input class="token-input" type="hidden" name="token">
            <button type="submit" class="btn btn-primary w-100">提交</button>
        </form>
    </div>
</div>

<script async>
    localStorage.setItem('lessonid', '{{ lesson.id }}');
    localStorage.setItem('lessonpage', "{% url 'lesson:lesson' lesson.id %}");
    let commentform = document.querySelector('.comment-form');
    let lessonid = localStorage.getItem('lessonid');
    let lessonpage = localStorage.getItem('lessonpage');
    let usernameinput = document.querySelector('.username-input');
    let tokeninput = document.querySelector('.token-input');

    function sendcomment(target) {
        let XHR = new XMLHttpRequest();
        let FD = new FormData(target);
        XHR.addEventListener('load', function (event) {
            obj = JSON.parse(event.target.responseText);
            alert(obj['message'])
            if (obj['succeeded']) {
                window.location.href = lessonpage;
            }
        });
        XHR.addEventListener('error', function (event) {
            alert("提交失败，请检查网络连接并重载本页面");
        });
        XHR.open('POST', '/handlecomment/' + lessonid + '/');
        XHR.send(FD);
    }

    commentform.addEventListener('submit', function (event) {
        event.preventDefault();
        sendcomment(event.target);
    });

    if (localStorage.getItem('token') != null && localStorage.getItem('username') != null) {
        usernameinput.value = localStorage.getItem('username');
        tokeninput.value = localStorage.getItem('token');
    } else {
        alert("请先登陆再评论ψ(._. )>");
        window.history.back();
    }
</script>
{% endblock %}